<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <link rel="stylesheet" href="I:/webpage/animate/animate.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
        .headroom--unpinned {top: -100px;}
        .headroom--pinned {top: 0;}
    </style>

    <style type="text/css">
        .scrollspy-example {
            height: 1200px;
            overflow: auto;
            position: relative;
        }
    </style>


</head>
<body>

<!-- 页眉大屏显示 -->
<div class="jumbotron">
    <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>
    </div>
</div>

<div class="container">

    <!-- 导航栏 -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="example">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">chohhhhjhol</a>
        </div>

        <div class="collapse navbar-collapse" id="tem">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#php">PHP</a></li>
                <li><a href="#js">JS</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">database<b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#mysql">MySQL</a></li>
                        <li><a href="#pgsql">PostgreSQL</a></li>
                        <li><a href="#mgdb">MogoDB</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <!-- 主体内容-->
    <div data-spy="scroll" data-target="#example" data-offset="0" class="scrollspy-example">
        <h4 id="php">PHP</h4>
        <p>PHP, an acronym for Hypertext Preprocessor, is a widely-used open source general-purpose scripting language. It is an HTML embedded scripting language and is especially suited for web development. The basic syntax of PHP is similar to C, Java, and Perl, and is easy to learn. PHP is used for creating interactive and dynamic web pages quickly, but you can do much more with PHP.
        </p>
        <h4 id="js">JS</h4>
        <p>
            JavaScript is a cross-platform, object-oriented scripting language developed by Netscape. JavaScript was created by Netscape programmer Brendan Eich. It was first released under the name of LiveScript as part of Netscape Navigator 2.0 in September 1995. It was renamed JavaScript on December 4, 1995. As JavaScript works on the client side, It is mostly used for client-side web development.
        </p>
        <h4 id="mysql">MySQL</h4>
        <p>
            MySQL tutorial of w3cschool is a comprhensive tutorial to learn MySQL. We have hundreds of examples covered, often with PHP code. This helps you to learn how to create PHP-MySQL based web applications.
        </p>
        <h4 id="pgsql">PostgreSQL</h4>
        <p>
            In 1986 the Defense Advanced Research Projects Agency (DARPA), the Army Research Office (ARO), the National Science Foundation (NSF), and ESL, Inc sponsored Berkeley POSTGRES Project which was led by Michael Stonebrakessr. In 1987 the first demo version of the project is released. In June 1989, Version 1 was released to some external users. Version 2 and 3 were released in 1990 and 1991. Version 3 had support for multiple storage managers, an query executor was improved, rule system was rewritten. After that, POSTGRES has been started to be implemented in various research and development projects. For example, in late 1992, POSTGRES became the primary data manager for the Sequoia 2000 scientific computing project4. User community around the project also has been started increasing; by 1993, it was doubled.
        </p>
        <h4 id="mgdb">MongoDB</h4>
        <p>
            The term NoSQL was coined by Carlo Strozzi in the year 1998. He used this term to name his Open Source, Light Weight, DataBase which did not have an SQL interface.In the early 2009, when last.fm wanted to organize an event on open-source distributed databases, Eric Evans, a Rackspace employee, reused the term to refer databases which are non-relational, distributed, and does not conform to atomicity, consistency, isolation, durability - four obvious features of traditional relational database systems.
        </p>
        <p>
            After reading the largest third party online MySQL tutorial by w3cschool, you will be able to install, manage and develop PHP-MySQL web applications by your own. We have a comprehensive, SQL TUTORIAL, which will help you to understand how to prepare queries to fetch data against various conditions.
        </p>

    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>


<script  type="text/javascript"  src="https://rawgithub.com/WickyNilliams/headroom.js/master/dist/headroom.js"></script>

<script  type="text/javascript"  src="https://rawgithub.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script>

<script type="text/javascript">

    $(".navbar-fixed-top").headroom({
        "tolerance" : 5,
        "offset" : 200,
        "classes" : {
            "initial" : "animated",
            "pinned" : "flipInX",
            "unpinned" : "flipOutX"
        }
    })

</script>


</body>
</html>